<template>
	<view class="page" v-show="isRender">
		<view class="page__bd">
			<view class="section">
				<view class="good-box">
					<u-image width="240rpx" :fade="false" height="160rpx" :src="info.image"></u-image>
					<view class="info">
						<view class="title">{{info.title}}</view>
						<view class="score">{{info.score}}积分</view>
					</view>
				</view>
			</view>
			<view class="section">
				<u-form :model="form" ref="uForm">
					<u-cell-item title="数量" :arrow="false" hover-class="none">
						<u-number-box slot="right-icon" :min="1" v-model="form.number" bg-color="#ffffff" :max="info.stock"></u-number-box>
					</u-cell-item>
					<u-form-item label="收货人" :border-bottom="false" required label-width="140" prop="receive_name">
						<u-input placeholder="请输入收货人" v-model="form.receive_name" />
					</u-form-item>
					<u-form-item label="收货电话" :border-bottom="false" required label-width="140" prop="receive_mobile">
						<u-input placeholder="请输入收货电话" v-model="form.receive_mobile" />
					</u-form-item>
					<u-form-item label="收货地址" :border-bottom="false" required label-width="140" prop="receive_address">
						<u-input placeholder="请输入收货地址" v-model="form.receive_address" />
					</u-form-item>
					<u-form-item label="备注" class="textarea" :border-bottom="false" label-width="140"
						prop="receive_note">
						<u-input placeholder="请输入备注" v-model="form.receive_note" type="textarea" />
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="page__ft">
			<u-button type="success" shape="circle" @click="submit" class="btn-submit">立即兑换</u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					number:1,
					receive_name: '',
					receive_mobile: '',
					receive_address: '',
					receive_note: ''
				},
				rules: {
					receive_name: [{
						required: true,
						message: '请填写收货人',
						trigger: ['blur,change']
					}],
					receive_mobile: [{
						required: true,
						message: '请填写收货电话',
						trigger: ['blur,change']
					}],
					receive_address: [{
						required: true,
						message: '请填写收货地址',
						trigger: ['blur,change']
					}]
				},
				info: null,
				isRender: false
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			console.log(this.rules)
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			let that = this;
			this.$u.api.getScoreshopGoodDetail({
				id: options.id
			}).then(res => {
				that.info = res.data;
				that.isRender = true;
			});
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var param = this.form
						param.good_id = this.info.id
						this.$u.api.doExchange(param).then(res => {
							this.$u.toast(res.msg);
							if (res.code) {
								//刷新用户信息
								this.$u.vuex('vuex_user', res.data)
								setTimeout(() => {
									this.$u.route({
										type: 'redirectTo',
										url: '/pages/scoreshop/order/list'
									})
								}, 1500);
							}
						});
					}
				});
			}
		},
	}
</script>
<style>
	page {
		background-color: #f4f4f4;
	}

	.page {
		// #ifdef H5
		height: calc(100vh - 44px);
		// #endif

		// #ifdef MP-WEIXIN
		height: 100vh;
		// #endif
	}

	.page__bd {
		overflow-y: auto;
		flex-grow: 1;
		padding-bottom: 30rpx;
	}

	.page__ft {
		flex-shrink: 0;
		padding-left: 50rpx;
		padding-right: 50rpx;
		padding-bottom: 50rpx;
	}

	.u-form-item {
		background: #f4f4f4;
		padding-left: 30rpx !important;
		padding-right: 30rpx !important;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.textarea.u-form-item {
		line-height: 1 !important;
	}

	.u-form-item--left {
		align-self: flex-start !important;
	}

	.section {
		background-color: #ffffff;
		border-radius: 30rpx;
		padding: 30rpx;
		width: calc(100% - 100rpx);
		margin: 50rpx auto 0 auto;
	}

	.good-box {
		display: flex;
		align-items: center;
	}

	.good-box .u-image {
		flex-shrink: 0;
		width: 330rpx;
		height: 280rpx;
		border-radius: 20rpx !important;
		overflow: hidden !important;
	}

	.good-box .info {
		flex-grow: 1;
		padding-left: 30rpx;
	}

	.good-box .info .title {
		font-size: 32rpx;

		font-weight: 600;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.good-box .info .score {
		margin-top: 20rpx;
		font-size: 40rpx;
		color: #59ba9c;
		font-weight: bold;
	}
	.u-cell{
		background: #f4f4f4 !important;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}
</style>
